<template>
    <div class="userDetails">
        <div>
            <div class="user_img">
                <img v-if="user.img" :src="user.img">
            </div>
            <div class="user_edit">
                <div>
                    <p @click="$router.push({path:'/userCollect',query:{collect:JSON.stringify(collect)}})">
                        <span>{{collect.length}}</span>
                        <span>收藏</span>
                    </p>
                    <p>
                        <span>0</span>
                        <span>关注</span>
                    </p>
                    <p @click="$router.push({path:'/history',query:{history:JSON.stringify(history)}})">
                        <span>{{history.length}}</span>
                        <span>历史记录</span>
                    </p>

                </div>
                <div>
                    <div class="user_editBtn" @click="$router.push('/connectVip')"
                         v-if="!isVIP">开通大会员
                    </div>
                    <div class="user_editBtn" @click="$router.push('/edit')">编辑资料</div>
                    <div class="user_editBtn" @click="logout">退出登录</div>
                </div>
            </div>
        </div>
        <div>
            <div class="userName">
                <h2 v-if="user.name">{{user.name}}</h2>
                <h2 v-else></h2>
                <van-icon name="vip-card" size="35" v-if="isVIP"/>
            </div>
            <p>{{user.signature}}</p>
        </div>
        <!--        <hr/>-->

    </div>
</template>

<script>
    export default {
        props: ['userinfo'],
        data() {
            return {
                user: {img: '../../assets/default_img.jpg', name: ""},
                history: "",
                collect: "",
                isVIP: false
            }
        },
        mounted: function () {

            this.$http.get("/collect/listHistory").then(
                (res) => {
                    const temp = res.data.data

                    temp.forEach((x) => {
                        x.name = x.item_name
                        if (x.genre) {
                            if (x.genre.length >= 4) {
                                x.chapter_count = 1
                            }
                        }
                    })
                    this.history = temp
                }
            )
            this.$http.get("/collect/getAll").then(
                (res) => {
                    const temp = res.data.data
                    temp.forEach((x) => {
                        x.name = x.item_name
                        if (x.genre) {
                            if (x.genre.length >= 4) {
                                x.chapter_count = 1
                            }
                        }
                    })
                    this.collect = temp
                }
            )
            this.user = JSON.parse(localStorage.getItem('user'))
            this.listRoles(this.user);
        },
        methods: {
            logout() {
                localStorage.setItem("token", "")
                localStorage.setItem("user", "{}")
                this.$router.push("/")
            },
            listRoles(user) {
                let v = false;
                user.roles.forEach((x) => {
                    if (x == 'vip') {
                        v = true
                    }
                })
                this.isVIP = v
            }
        }
    }
</script>

<style lang="less">
    .userDetails {
        background-color: white;
        padding: 0 3.33vw;

        > div:nth-child(1) {
            display: flex;

            .user_img {
                img {
                    height: 23.61vw;
                    width: 23.61vw;
                    border-radius: 50%;
                }

                margin-right: 5.56vw;
            }

            .user_edit {
                flex: 1;

                div:nth-child(1) {
                    display: flex;

                    p {
                        flex: 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        font-size: 3.61vw;
                    }

                    p:nth-child(1), p:nth-child(2) {
                        border-right: 0.28vw solid #aaaaaa;
                    }
                }

                div:nth-child(2) {

                    .user_editBtn {
                        padding: 0.83vw;
                        border: 0.28vw solid #fb7a9f;
                        border-radius: 1.11vw;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #fb7a9f;
                        margin-top: 2.78vw;
                    }
                }
            }
        }

        > div:nth-child(2) {
            .userName {
                display: flex;
                align-items: center;

                h2 {
                    margin: 2.78vw 2.39vw 0.83vw 0;
                }

                .van-icon-vip-card {
                    color: #fb7a9f;
                }
            }


            p {
                padding: 0;
                margin: 2vw 0 1vw 1vw;
                color: #999;
            }
        }

    }
</style>